# 跨境电商卖家论坛 - 移动端 UI 设计规范

## 1. 品牌与整体风格定义

- **品牌基调（Brand Tone）**：专业、可信、高效、国际化
  - 体现跨境电商的专业性和全球化视野
  - 传达信任感和商业价值
  - 强调效率和实用性

- **情绪色板（Emotion Board）**：
  - 专业蓝：代表信任、稳定、国际化
  - 活力橙：代表活力、创新、增长
  - 成功绿：代表收益、成功、正向反馈
  - 中性灰：代表专业、平衡、信息层级

- **设计理念**：
  - 信息优先：清晰的信息层级，突出核心内容
  - 效率导向：减少操作步骤，提升使用效率
  - 国际化：支持多语言，考虑不同文化背景
  - 专业感：商务化设计，避免过度娱乐化

- **适用场景**：
  - **小程序**：微信小程序 / 支付宝小程序
  - **H5 页面**：iOS 与 Android 浏览器（Safari、Chrome、微信内置浏览器等）

- **目标设备**：
  - 主流智能手机（屏幕宽度范围：320px – 480px）
  - 设计基准：以 375px 宽度（iPhone 6/7/8 尺寸）作为设计稿基准

## 2. 色彩规范

### 2.1 主色（Primary Color）

- **主色值**：
  - 主色：`#165DFF`（专业蓝）
  - 主色深色：`#0E42D2`
  - 主色浅色：`#4080FF`
  - 主色超浅：`#E8F3FF`

- **使用场景**：主要按钮、链接、重要标签、导航激活状态、强调元素

### 2.2 辅助色（Secondary Color）

- **辅助色值**：
  - 辅助色：`#FF6B35`（活力橙）
  - 辅助色深色：`#E55A2B`
  - 辅助色浅色：`#FF8C5A`
  - 辅助色超浅：`#FFF4F0`

- **使用场景**：次要按钮、标签、状态提示、导航图标、促销信息

### 2.3 功能色（Functional Colors）

- **成功色**：
  - 成功主色：`#00B42A`
  - 成功浅色：`#E8F8E8`
  - 使用场景：成功提示、完成状态、正向数据展示

- **警告色**：
  - 警告主色：`#FF7D00`
  - 警告浅色：`#FFF7E8`
  - 使用场景：警告提示、待处理状态、注意事项

- **错误色**：
  - 错误主色：`#F53F3F`
  - 错误浅色：`#FFECE8`
  - 使用场景：错误提示、失败状态、删除操作

- **信息色**：
  - 信息主色：`#165DFF`
  - 信息浅色：`#E8F3FF`
  - 使用场景：信息提示、帮助说明、普通状态

### 2.4 中性色（Neutral Colors）

- **文字颜色**：
  - 标题文字：`#1D2129`（主要文字，对应 H5 的 `#333333`）
  - 正文文字：`#4E5969`（次要文字，对应 H5 的 `#666666`）
  - 辅助文字：`#86909C`（说明文字，对应 H5 的 `#999999`）
  - 禁用文字：`#C9CDD4`（禁用状态）

- **背景颜色**：
  - 页面背景：`#F7F8FA`（对应 H5 的 `#F5F5F5`）
  - 卡片背景：`#FFFFFF`
  - 浅灰背景：`#F2F3F5`
  - 深灰背景：`#E5E6EB`

- **边框颜色**：
  - 主要边框：`#E5E6EB`（对应 H5 的 `#E8E8E8`）
  - 次要边框：`#F2F3F5`
  - 分割线：`#F2F3F5`

## 3. 字体规范

### 3.1 字体家族

- **小程序**：
  - iOS：`PingFang SC`、`Helvetica Neue`
  - Android：`Roboto`、`Noto Sans SC`
  - 系统默认字体

- **H5 页面**：
  - 推荐字体栈：`-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif`

### 3.2 字号体系

#### 小程序字号体系（rpx 单位，设计稿 750px 基准）

| 元素 | 设计稿字号 (rpx) | 实际字号 (px) | 行高 | 字重 | 颜色 | 说明 |
|------|-----------------|--------------|------|------|------|------|
| H1（大标题） | 32px | 16px | 1.5 | Bold | `#1D2129` | 页面主标题、重要信息展示 |
| H2（中标题） | 28px | 14px | 1.5 | SemiBold | `#1D2129` | 模块标题、卡片标题 |
| H3（小标题） | 24px | 12px | 1.5 | SemiBold | `#1D2129` | 列表项标题、次要标题 |
| Body（正文） | 28px | 14px | 1.6 | Regular | `#4E5969` | 正文内容、描述文字 |
| Caption（说明） | 24px | 12px | 1.5 | Regular | `#86909C` | 辅助说明、时间戳、标签文字 |
| Small（辅助） | 20px | 10px | 1.5 | Regular | `#86909C` | 最小字号，仅用于特殊场景 |

#### H5 字号体系（px 单位，设计稿 375px 基准）

| 元素 | 字号 (px) | 行高 | 字重 | 颜色 | 说明 |
|------|----------|------|------|------|------|
| 页面标题 | 20–24 | 1.4 | Bold | `#333333` | 首屏主标题 |
| 二级标题 | 18 | 1.4 | SemiBold | `#333333` | 模块标题 |
| 正文 | 14–16 | 1.5 | Regular | `#666666` | 主要阅读内容 |
| 辅助文字 | 12–13 | 1.4 | Regular | `#999999` | 说明、提示、时间等 |
| 按钮文字 | 16 | 1.2 | Medium | `#FFFFFF` 或主题色 | 居中，无下划线 |

### 3.3 行高规范

- **标题类**：1.4–1.5 倍字号
- **正文类**：1.5–1.6 倍字号
- **说明类**：1.4–1.5 倍字号

## 4. 图标规范

- **图标风格**：线性图标为主，面性图标为辅
  - 线性图标：常规操作、导航、状态
  - 面性图标：重要功能、强调内容

- **默认尺寸**：
  - **小程序**：
    - 小图标：`32px`（20px 实际尺寸）
    - 中图标：`40px`（24px 实际尺寸）
    - 大图标：`48px`（32px 实际尺寸）
    - 超大图标：`64px`（48px 实际尺寸）
  - **H5**：
    - 常用尺寸：16px / 20px / 24px

- **图标格式**：
  - **小程序**：支持 PNG、SVG、Icon Font
  - **H5**：推荐使用 **SVG** 或 **Icon Font**（如阿里 Iconfont）

- **线条粗细**：
  - 常规图标：`2px`
  - 小图标：`1.5px`
  - 强调图标：`2.5px`

- **主色/中性色使用规则**：
  - 主色图标：主要功能、激活状态
  - 中性色图标：常规功能、未激活状态
  - 功能色图标：状态提示、警告信息

- **交互状态**：
  - 默认：`#86909C`（中性色）
  - 激活：`#165DFF`（主色）
  - 悬停：`#4080FF`（主色浅色）
  - 禁用：`#C9CDD4`（禁用色）

- **H5 特殊要求**：
  - 图标与文字同行时，垂直居中对齐
  - 操作类图标需有点击反馈（如变色或微动效）

## 5. 间距与布局

### 5.1 布局原则

#### 小程序布局
- 使用 `rpx` 单位实现自适应
- 内容区域最大宽度：`750px`（设计稿基准）
- 页面内边距：左右各 `32px`（16px 实际）

#### H5 布局原则
- 采用 **流式布局**，适配不同屏幕宽度
- 内容区域最大宽度建议不超过 **480px**
- 使用 **安全边距**（左右 padding ≥ 16px）
- 重要操作区域（如按钮）避免靠近屏幕边缘或状态栏

### 5.2 间距系统

#### 小程序间距（rpx 单位，设计稿 750px 基准）
- 最小单位：`8px`（4px 实际）
- 推荐间距：`16px`（8px 实际）/ `24px`（12px 实际）/ `32px`（16px 实际）/ `48px`（24px 实际）
- 段落间距：`32px`（16px 实际）
- 模块间距：`24px`（12px 实际）

#### H5 间距系统（8px 基准）
- 最小单位：**4px**
- 推荐间距：8px / 12px / 16px / 24px / 32px / 48px
- 段落间距：16px
- 模块间距：24px

### 5.3 全局圆角规范

- **全局圆角尺寸**：
  - 小圆角：`4px`（按钮、标签、小卡片）
  - 中圆角：`8px`（卡片、输入框、弹窗）
  - 大圆角：`12px`（大卡片、特殊容器）
  - 超大圆角：`16px`（头像、特殊展示）

### 5.4 全局边距规范

#### 小程序边距
- **页面边距**：`32px`（16px 实际尺寸）
  - 标准页面：左右各 `32px`
  - 内容页：左右各 `32px`，上下各 `24px`

- **卡片间距**：
  - 卡片内边距：`32px`（16px 实际尺寸）
  - 卡片间距：`24px`（12px 实际尺寸）

- **模块间距**：
  - 小间距：`16px`（8px 实际尺寸）- 紧密相关元素
  - 中间距：`24px`（12px 实际尺寸）- 常规模块间距
  - 大间距：`32px`（16px 实际尺寸）- 大模块间距
  - 超大间距：`48px`（24px 实际尺寸）- 页面级间距

#### H5 边距
- 页面内边距：左右各 `16px`（最小安全边距）
- 卡片内边距：`16px`
- 模块间距：`24px`

### 5.5 栅格与适配规范

#### 小程序适配规则
- **基准宽度**：`375px`（iPhone 标准）
- **扩展宽度**：`414px`（iPhone Plus）
- **最小宽度**：`320px`（小屏设备）
- **最大宽度**：`750px`（大屏设备）
- **自动伸缩规则**：
  - 使用 `rpx` 单位（小程序）
  - 字体大小：使用 `px` 固定，通过媒体查询适配
  - 间距大小：使用 `rpx` 实现自适应

#### H5 响应式规则
- **设计基准**：375px 宽度（iPhone 6/7/8 尺寸）
- **适配方案**：采用 `rem` 或 `vw/vh` 等响应式方案
- **断点设置**：`320px`、`375px`、`414px`、`480px`、`768px`
- **viewport 设置**：
  ```html
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  ```
- **使用媒体查询实现不同屏幕适配**

## 6. 组件规范（重点）

### 6.0 组件展示页面规范

- **页面布局**：
  - 页面背景：`#F7F8FA`
  - 容器最大宽度：`750px`（小程序）/ `480px`（H5），居中显示
  - 页面内边距：`32px`（16px 实际）

- **章节卡片**：
  - 背景：`#FFFFFF`
  - 圆角：`8px`
  - 内边距：`32px`（16px 实际）
  - 卡片间距：`32px`（16px 实际）
  - 阴影：`0 2px 8px rgba(0, 0, 0, 0.04)`

- **标题规范**：
  - 页面主标题（H1）：字号 `32px`（18px 实际），字重 `600`，颜色 `#1D2129`，下边距 `48px`（24px 实际）
  - 组件标题（H2）：字号 `28px`（16px 实际），字重 `600`，颜色 `#1D2129`，上边距 `48px`（24px 实际），下边距 `24px`（12px 实际）
  - 分组标题（H3）：字号 `24px`（14px 实际），字重 `600`，颜色 `#1D2129`，上边距 `32px`（16px 实际），下边距 `16px`（8px 实际）

- **说明文字**：
  - 分组说明：字号 `28px`（16px 实际），颜色 `#86909C`，下边距 `16px`（8px 实际）

- **组件分组间距**：
  - 组件分组之间的间距：`32px`（16px 实际）
  - 最后一个分组无下边距

- **移动端适配**：
  - 在移动端（宽度 ≤ 414px）时，页面内边距调整为 `16px`
  - 按钮组件在移动端应垂直堆叠，全宽显示
  - 标题字号相应缩小，保持视觉平衡

### 6.1 按钮（Button）

#### 小程序按钮规格

- **尺寸规格**：
  - 大按钮：高度 `88px`（44px），左右内边距 `48px`（24px），字号 `32px`（16px）
  - 中按钮：高度 `72px`（36px），左右内边距 `40px`（20px），字号 `28px`（14px）
  - 小按钮：高度 `56px`（28px），左右内边距 `32px`（16px），字号 `24px`（12px）

- **状态样式**：
  - Normal（默认）：主色背景 `#165DFF`，白色文字
  - Hover（悬停）：主色浅色背景 `#4080FF`
  - Pressed（按下）：主色深色背景 `#0E42D2`
  - Disabled（禁用）：灰色背景 `#F2F3F5`，灰色文字 `#C9CDD4`，透明度 40%

- **按钮类型**：
  - 主要按钮：主色背景 `#165DFF`，白色文字，用于主要操作
  - 次要按钮：白色背景，主色边框 `1px solid #165DFF`，主色文字，用于次要操作
  - 文字按钮：无背景，主色文字 `#165DFF`，用于辅助操作
  - 危险按钮：错误色背景 `#F53F3F`，白色文字，用于删除等危险操作

- **移动端展示规范**：
  - 在移动端组件展示页面中，按钮应垂直堆叠显示
  - 按钮宽度：在移动端应为全宽（100%），左右无间距
  - 按钮间距：垂直排列时，按钮之间的间距为 `16px`（8px 实际）
  - 按钮对齐：左对齐或居中对齐，根据页面布局决定

#### H5 按钮规格

| 类型 | 背景色 | 文字色 | 圆角 | 高度 | 状态说明 |
|------|--------|--------|------|------|----------|
| 主按钮 | 主色 `#165DFF` | `#FFFFFF` | 8px | 48px | 禁用时透明度 40% |
| 次按钮 | `#FFFFFF` | 主色 `#165DFF` | 8px | 48px | 边框 1px solid 主色 |
| 文字按钮 | 透明 | 主色 `#165DFF` | 0 | 自适应 | 无背景，hover 有下划线或背景微变 |
| 危险按钮 | `#F53F3F` | `#FFFFFF` | 8px | 48px | 用于删除、退出等操作 |

- **通用规范**：
  - 按钮最小点击区域：**44×44px**（小程序为 88×88px，即 44×44px 实际）
  - 按钮之间间距 ≥ 16px
  - 加载状态：显示 loading 动画，禁止重复点击
  - 按钮点击反馈：微压感 `scale(0.98)` 或背景色加深，持续时间 150ms

- **使用场景**：
  - 大按钮：用于页面主要操作、重要流程的关键步骤
  - 中按钮：用于常规操作、表单提交、列表操作
  - 小按钮：用于次要操作、标签内操作、紧凑布局场景

### 6.2 输入框（Input Field）

#### 小程序输入框规格

- **尺寸规格**：
  - 高度：`88px`（44px）
  - 内边距：左右 `32px`（16px），上下 `24px`（12px）
  - 圆角：`8px`
  - 字号：`28px`（16px 实际）
  - 宽度：在移动端应为全宽（100%）

- **状态样式**：
  - 默认：白色背景 `#FFFFFF`，灰色边框 `1px solid #E5E6EB`，文字颜色 `#1D2129`
  - 输入中（聚焦）：白色背景，主色边框 `1px solid #165DFF`，显示聚焦状态
  - 禁用：浅灰背景 `#F7F8FA`，灰色边框 `1px solid #E5E6EB`，文字颜色 `#C9CDD4`
  - 错误态：白色背景，错误色边框 `1px solid #F53F3F`，错误提示文字 `#F53F3F`

- **占位符文本规范**：
  - 颜色：`#86909C`（辅助文字色，对应 H5 的 `#BFBFBF`）
  - 字号：`28px`（16px 实际）
  - 内容：清晰说明输入要求，避免模糊表述

#### H5 输入框规格

- **尺寸规格**：
  - 高度：44px 或 48px
  - 圆角：8px
  - 边框：1px solid `#D9D9D9`（默认）/ `#165DFF`（聚焦）/ `#F53F3F`（错误）
  - 聚焦状态：边框色变为主色
  - 占位符颜色：`#BFBFBF`
  - 错误状态：边框色为 `#F53F3F`，下方显示错误提示（12px，`#F53F3F`）

#### 通用规范

- **标签规范**：
  - 标签位置：输入框上方，间距 `8px`（4px 实际）
  - 标签字号：`28px`（16px 实际，H5 为 14–16px）
  - 标签颜色：`#1D2129`
  - 必填标识：红色星号 `*`，颜色 `#F53F3F`，位于标签文字后

- **错误提示规范**：
  - 位置：输入框下方，间距 `8px`（4px 实际）
  - 字号：`24px`（14px 实际，H5 为 12px）
  - 颜色：`#F53F3F`
  - 图标：可使用警告图标或文字提示

- **字数统计规范**：
  - 位置：输入框右下角
  - 字号：`24px`（14px 实际）
  - 颜色：`#86909C`（未超限）、`#F53F3F`（超限）
  - 格式：`已输入字数/最大字数`

- **移动端展示规范**：
  - 在组件展示页面中，输入框应垂直排列
  - 输入框之间间距：`24px`（12px 实际）
  - 每个输入框示例应包含完整的标签、输入框、错误提示（如适用）

### 6.3 表单控件

#### 6.3.1 选择器（Picker）

- **小程序**：使用小程序原生 picker 组件
- **H5**：使用系统原生或统一 UI 弹层
- **通用规范**：
  - 确认/取消按钮固定在底部
  - 选项高度：`112px`（56px 实际）
  - 选项间距：`1px` 分割线

#### 6.3.2 开关（Switch）

- **尺寸规格**：
  - 宽度：`104px`（52px 实际）
  - 高度：`64px`（32px 实际）
- **状态样式**：
  - 开启：背景主色 `#165DFF`，圆点白色
  - 关闭：背景 `#E8E8E8`，圆点 `#FFFFFF`
- **交互**：点击切换状态，有动画反馈

### 6.4 弹窗（Modal）

- **标题**：
  - 字号：`32px`（18px 实际，H5 为 18–20px）
  - 字重：`600`（SemiBold）
  - 颜色：`#1D2129`
  - 内边距：上下 `32px`（16px），左右 `32px`（16px）

- **内容区**：
  - 最大高度：屏幕高度 60%
  - 内边距：`32px`（16px）
  - 可滚动：内容超出时显示滚动条

- **按钮**：
  - 底部按钮区：高度 `112px`（56px），内边距 `32px`（16px）
  - 按钮间距：`24px`（12px）
  - 取消按钮：次要按钮样式
  - 确认按钮：主要按钮样式

- **蒙层透明度**：`rgba(0, 0, 0, 0.5)`

### 6.5 列表/List

- **列表行间距**：
  - 标准间距：`24px`（12px 实际）
  - 紧密间距：`16px`（8px 实际）
  - 宽松间距：`32px`（16px 实际）

- **左图右文布局规范**：
  - 图片尺寸：`96px × 96px`（48px × 48px）
  - 图片圆角：`8px`
  - 图片与文字间距：`24px`（12px）
  - 文字区域：自适应宽度

- **左滑/右滑规则**（如需要）：
  - 滑动距离：`160px`（80px）
  - 操作按钮：高度与列表项一致，宽度 `160px`（80px）
  - 操作类型：删除（红色）、编辑（主色）、更多（灰色）

### 6.6 Toast、Message、ActionSheet

#### Toast 提示

- **展示位置**：屏幕中央偏上（小程序）/ 页面中部或底部（H5）
- **背景**：`rgba(0, 0, 0, 0.7)`
- **文字**：白色，字号 `28px`（16px）
- **圆角**：`8px`
- **内边距**：上下 `24px`（12px），左右 `32px`（16px）
- **动画**：淡入淡出，时长 `300ms`
- **显示时长**：`2000ms`（成功）、`3000ms`（错误）
- **类型**：成功（绿色）、失败（红色）、警告（黄色）

#### Message 消息

- **展示位置**：页面顶部
- **背景**：白色，带阴影
- **类型**：成功（绿色 `#00B42A`）、警告（橙色 `#FF7D00`）、错误（红色 `#F53F3F`）、信息（蓝色 `#165DFF`）
- **动画**：从上滑入，时长 `300ms`
- **显示时长**：`3000ms`，可手动关闭

#### ActionSheet 操作面板

- **展示位置**：屏幕底部
- **背景**：白色，顶部圆角 `24px`（12px）
- **选项高度**：`112px`（56px）
- **选项间距**：`1px` 分割线
- **取消按钮**：独立区域，顶部间距 `16px`（8px）
- **动画**：从下滑入，时长 `300ms`
- **蒙层**：`rgba(0, 0, 0, 0.5)`

## 7. 动效规范

### 7.1 页面切换

- **小程序**：
  - 页面进入：从右滑入，时长 `300ms`，缓动函数 `ease-out`
  - 页面退出：向左滑出，时长 `300ms`，缓动函数 `ease-in`

- **H5**：
  - 推荐使用 **淡入淡出** 或 **左右滑动**（模拟原生 App）
  - 动画时长：300ms

### 7.2 按钮点击

- **微压感**：`scale(0.98)` 或背景色加深
- **持续时间**：150ms

### 7.3 弹窗动画

- **进入动效**：淡入 + 上滑，时长 `300ms`，缓动函数 `ease-out`
- **退出动效**：淡出 + 下滑，时长 `300ms`，缓动函数 `ease-in`

### 7.4 列表动画

- **列表项进入**：淡入，时长 `200ms`，延迟递增
- **列表滑动**：跟随手指，松手后回弹

### 7.5 Tab 切换

- **内容切换**：淡入淡出，时长 `200ms`

### 7.6 Loading 动画规范

- **页面加载**：全屏 loading（带品牌色）
- **列表加载**：底部显示加载动画和文字提示，或使用 skeleton 骨架屏
- **按钮加载**：按钮内显示小 loading，禁用点击
- **加载动画**：使用主色，旋转动画，时长 `1s` 循环

## 8. 适配与兼容性

### 8.1 小程序适配

- 使用 `rpx` 单位实现自适应
- 通过媒体查询适配不同屏幕尺寸
- 字体大小使用 `px` 固定

### 8.2 H5 适配

- **viewport 设置**：
  ```html
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  ```

- **适配方案**：
  - 使用 `rem` 单位（推荐）：以 375px 为基准，1rem = 10px
  - 使用 `vw/vh` 单位：1vw = 屏幕宽度的 1%
  - 使用媒体查询实现断点适配

- **兼容性考虑**：
  - iOS Safari：支持良好
  - Android Chrome：支持良好
  - 微信内置浏览器：支持良好，需注意部分 CSS3 特性
  - 支付宝内置浏览器：支持良好

- **性能优化**：
  - 图片使用 WebP 格式（需兼容性检测）
  - 使用 CSS3 硬